<script lang="ts" setup>

// const props = defineProps({
//     vals: {
//         type: String,
//     },
// })

const model = defineModel({ type: String })

const isOne = ref(false)
const isTwo = ref(false)
const isThree = ref(false)
// const isFour = ref(false)
// const isFive = ref(false)
const psdstrength = ref('')

/**
 * 评估密码分数，满足每个条件+20分，最多100分。
 * 条件：
 *  - 长度 9-16 位
 *  - 至少包含大写字母
 *  - 至少包含小写字母
 *  - 至少包含数字
 *  - 至少包含一个特殊字符（自定义集合）
 * @param {string} pwd
 * @returns {number} 分数（0-100）
 */
function scorePasswords(pwd) {
    const scoreUnit = 20; // 每个条件的分值
    let score = 0;

    // 1) 长度 9-16 位
    const lenOk = pwd.length >= 9 && pwd.length <= 16;
    // 2) 大写字母
    const hasUpper = /[A-Z]/.test(pwd);
    // 3) 小写字母
    const hasLower = /[a-z]/.test(pwd);
    // 4) 数字
    const hasDigit = /\d/.test(pwd);
    // 5) 特殊字符
    // const hasSpecial = /[^A-Za-z0-9\s]/.test(pwd);
    // const hasSpecial = /[^A-Za-z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?`~]/.test(pwd);
    // const hasSpecial = /^[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?`~]*$/.test(pwd);
    const hasSpecial = /[!@#$%^&*()_+\-=$$$${};':"\\|,.<>\/?`~]/.test(pwd);


    // if (!/[!@#$%^&*()_+\-=$$$${};':"\\|,.<>\/?`~]/.test(password)) {
    //     return showError("密码必须包含至少一个特殊字符", isForced), false;
    // }


    // 累加分数：如果条件成立就加一个单位
    if (lenOk) score += scoreUnit;
    if (hasUpper) score += scoreUnit;
    if (hasLower) score += scoreUnit;
    if (hasDigit) score += scoreUnit;
    if (hasSpecial) score += scoreUnit;

    console.log('分数：' + score)
    let strength = ''
    if (score <= 20) {
        strength = '弱'
    } else if (score > 20 && score <= 40) {
        strength = '一般'
    } else if (score > 40 && score <= 60) {
        strength = '强'
    } else if (score > 60 && score <= 80) {
        strength = '安全'
    } else {
        strength = '非常安全'
    }
    return strength
}

/**
 * 评估密码分数，满足每个条件+20分，最多100分。
 * 条件：
 *  - 长度 9-16 位
 *  - 至少包含大写字母
 *  - 至少包含小写字母
 *  - 至少包含数字
 *  - 至少包含一个特殊字符（自定义集合）
 * @param {string} pwd
 * @returns {number} 分数（0-100）
 */
function scorePassword(pwd) {
    const scoreUnit = 20; // 每个条件的分值
    let score = 0;

    // 记录每个条件是否已满足
    const conditionsMet = {
        length: false,
        hasUpper: false,
        hasLower: false,
        hasDigit: false,
        hasSpecial: false
    };

    // 1) 长度 9-16 位
    if (pwd.length >= 9) {
        conditionsMet.length = true;
    }
    // 2) 大写字母
    if (/[A-Z]/.test(pwd)) {
        conditionsMet.hasUpper = true;
    }
    // 3) 小写字母
    if (/[a-z]/.test(pwd)) {
        conditionsMet.hasLower = true;
    }
    // 4) 数字
    if (/\d/.test(pwd)) {
        conditionsMet.hasDigit = true;
    }
    // 5) 特殊字符（你可以按需调整集合）
    const specialChars = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?`~]/; // 自定义的特殊字符集合
    if (specialChars.test(pwd)) {
        conditionsMet.hasSpecial = true;
    }

    console.log('conditionsMet')
    console.log(conditionsMet)
    // 根据条件打分
    for (const condition in conditionsMet) {
        if (conditionsMet[condition]) {
            score += scoreUnit;
        }
    }

    // 确保分数不超过 100
    let scores = Math.min(score, 100);

    console.log('分数：' + scores)
    let strength = ''
    // if (scores <= 20) {
    //     strength = '弱'
    // } else if (scores > 20 && scores <= 40) {
    //     strength = '一般'
    // } else if (scores > 40 && scores <= 60) {
    //     strength = '强'
    // } else if (scores > 60 && scores <= 80) {
    //     strength = '安全'
    // } else {
    //     strength = '非常安全'
    // }
    if (scores <= 40) {
        strength = '弱'
    } else if (scores > 40 && scores <= 80) {
        strength = '中'
    } else {
        strength = '强'
    }
    return strength

}

function onPasswordChange(val){
    const psdVal = val
    isOne.value = false
    isTwo.value = false
    isThree.value = false
    // isFour.value = false
    // isFive.value = false
    const psdStr = scorePassword(psdVal)
    psdstrength.value = psdStr
    switch (psdstrength.value) {
        case '弱':
            isOne.value = true
            break;
        // case '一般':
        //     isTwo.value = true
        //     break;
        case '中':
            isTwo.value = true
            break;
        case '强':
            isThree.value = true
            break;
        // case '安全':
        //     isFour.value = true
        //     break;
        // case '非常安全':
        //     isFive.value = true
        //     break;
        default:
            break;
    }
}

watch(() => model.value, (value) => {
  console.log('value')
  console.log(value)
  if (value) {
    onPasswordChange(model.value)
  }
})


</script>

<template>
  <div class="pswBox" v-if="model !== ''">
    <!-- <span class="psd-item" :class="(isOne || isTwo || isThree || isFour || isFive ) ? 'colorRed' : 'colorInit'"></span>
    <span class="psd-item" :class="(isTwo || isThree || isFour || isFive) ? 'colorOrange' : 'colorInit'"></span>
    <span class="psd-item" :class="(isThree || isFour || isFive) ? 'colorBlue' : 'colorInit'"></span>
    <span class="psd-item" :class="(isFour || isFive) ? 'colorGreen' : 'colorInit'"></span>
    <span class="psd-item" :class="(isFive) ? 'colorSafe' : 'colorInit'"></span> -->
    <span class="psd-item" :class="(isOne || isTwo || isThree) ? 'colorRed' : 'colorInit'"></span>
    <!-- <span class="psd-item" :class="(isTwo || isThree || isFour || isFive) ? 'colorOrange' : 'colorInit'"></span> -->
    <span class="psd-item" :class="(isTwo || isThree) ? 'colorBlue' : 'colorInit'"></span>
    <span class="psd-item" :class="(isThree) ? 'colorGreen' : 'colorInit'"></span>
    <!-- <span class="psd-item" :class="(isFive) ? 'colorSafe' : 'colorInit'"></span> -->
    <!-- <span class="psd-item" :class="(isSix ) ? 'colorSafe' : 'colorInit'"></span> -->
    <span class="left5"> {{ psdstrength }} </span>
  </div>
</template>

<style lang="sass" scoped>
.pswBox
  display: flex

.psd-item
  display: flex
  align-items: center
  justify-content: center
  width: 60rpx
  height: 20rpx
  border: 1rpx solid transparent
  font-size: 26rpx
  margin-right: 4rpx

.left5
  margin-left: 10rpx
.colorRed
  background-color: red
.colorOrange
  background-color: #f0ad4e
.colorBlue
  background-color: #ec971f
.colorGreen
  background-color: #54ec51
.colorSafe
  background-color: #52c41a
.colorInit
  background: #eee

</style>


